<template>
	<view class="container" :style="'background-image: url('+baseUrl+'/system/6cdb0ec42ebd4011b8cae1e892f26d05.png);'">
		<view class="container-card">
			<view class="header">
				<image :src="logoImg" style="width: 4rem;height: 2.5rem;align-items: center;"></image>
				<view style="font-weight: bold;font-size: 16px; font-family: NotoSansHans-Medium;">寰宇东方国际集装箱（青岛）有限公司
				</view>
				<view style="font-size: 8px;">DONGFANG INTERNATIONAL CONTAINER(QINGDAO)CO.,LTD.</view>
			</view>
			<view class="main">
				<view class="name">
					<text class="iconfont icon_yonghuming" style="font-size: 1rem;"></text>
					<input :adjust-position="true" :value='userName' placeholder="请输入用户名" @input="getUserName">
				</view>
				<view class="password" style="font-size: 1rem;">
					<text class="iconfont icon_pwd"></text>
					<input style="margin-right: 10px;width: 80%;" :value='passWord' :password="!showPassword"
						:adjust-position="true" @input="getPassWord" placeholder="请输入密码">

					<text class="iconfont" :class="showPassword?'icon_no_eye':'icon_eye'"
						style="position: absolute;left: auto;right: 0px;padding: 10px;" @click="showPw"></text>

				</view>

			</view>
			<view class="checkbox_pow" style=" flex-flow: row; display: flex;">
				<checkbox-group @change="changeCheckPwd">
					<checkbox :checked="checkPwd" value="1">记住密码</checkbox>
				</checkbox-group>
				<view style="color: #1E6AD3; flex: 1; text-align: end;" @click="recoverPassWord">忘记密码？</view>
			</view>
			<view class="login_btn">
				<button @click="loginNow()">立即登录</button>
			</view>
			<view class="checkbox_pow" style="margin-left: -1rem;">
				<checkbox-group @change="changeCheckArgeement" style="display: inline-block;">
					<checkbox value="true" :checked="checkedArgeement"></checkbox>
				</checkbox-group>
				<view style="display: inline-block;text-decoration:underline" @click="handlerToArgeement">同意《用户协议》
				</view>
			</view>
			<view style="font-size: 8px;display: flex;width: 100%;justify-content: center;">{{"版本号："+appVersion}}</view>
			<text v-if="false" style="color: blue;float: right;margin-right: 2rem;text-decoration: blue;">体验账号</text>

		</view>
	</view>
</template>

<script>
	import sgin from '@/pages/api/ems/eSign/eSign.js'
	import messageApi from '@/pages/api/messageApi.js'
	import md5 from '@/uni_modules/js-md5/build/md5.min.js';
	import commonConstants from '@/common/constants/commonConstants.js'
	import authMenuApi from '@/pages/api/authMenuApi.js'
	import {
		encryptAES,
		decryptAES,
		encrypt,
		decrypt
	} from '@/common/js/des.js'
	import store from "@/store"
	export default {
		data() {
			return {
				appVersion: '1.0.0',
				showPassword: false,
				logoImg: commonConstants.request.imageUrl + '/system/f35209dab62048f0a272ebd694422991.png',
				userName: '',
				passWord: '',
				checkPwd: uni.getStorageSync("rememberPassword") ? true : false,
				checkedArgeement: false,
				baseUrl: commonConstants.request.imageUrl,
			}
		},
		methods: {
			getPassWord(e) {
				console.log(e);
				this.passWord = e.detail.value
			},
			getUserName(e) {
				console.log(e);
				this.userName = e.detail.value
			},
			showPw() {
				this.showPassword = !this.showPassword
			},
			changeCheckArgeement(val) {
				console.log(val);
				this.checkedArgeement = val.detail.value.length > 0
			},
			handlerToArgeement() {
				uni.navigateTo({
					url: './registration-guide/user-agreement'
				})
			},
			recoverPassWord() {
				uni.navigateTo({
					url: '/pages/person/system-setting/secret-protection/secret-protection?title=密保校验'
				})
			},
			changeCheckPwd(val) {
				this.checkPwd = !this.checkPwd
				uni.setStorageSync("rememberPassword", this.checkPwd);
			},
			loginNow() {
				// 
				if (this.checkedArgeement) {
					// console.log(this.userName,this.passWord,(!this.userName || !this.passWord));
					if (!this.userName || !this.passWord) {
						uni.showToast({
							position: 'bottom',
							icon: 'none',
							title: '请输入用户名和密码',
							duration: 2000
						});
						return;
					};
					this.requestLogin(this.userName, this.passWord)
				} else {
					uni.showToast({
						title: "请同意用户协议",
						icon: "none"
					});
				}

			},
			/**
			 * 请求登录接口
			 * @param {Object} userCode
			 * @param {Object} md5pwd
			 */
			requestLogin(userCode, passWord) {

				var that = this;
				var md5pwd = md5(passWord + "abc12345");
				if (this.checkPwd) {
					const pass = "myPassphrase";
					uni.setStorageSync("pwd", encryptAES(passWord))
					var encr = encryptAES(passWord)
					// console.log(encr,"------加密数据");
					// console.log(decryptAES(encr),"-----解密数据");
				}
				var result = messageApi.doLogin({
					"operatorUser": userCode,
					"operatorUserName": userCode,
					"password": md5pwd,
					"userCode": userCode,
				}, (result) => {

					if (result.data) {
						console.log("登录成功！" + JSON.stringify(result.data));
						uni.setStorageSync("userInfo", {
							userCode: result.data.userCode,
							userName: result.data.userName
						});

						uni.setStorageSync("token", encrypt(result.data.token, 3))
						store.commit("saveToken", result.data.token)
					}
					console.log(result, "登录成功");

					//token

					console.log(result.data.token, "========result.token");
					// uni.setStorageSync("token",encrypt(result.token,3))
					uni.setStorageSync("pwd", encryptAES(passWord))
					//#ifdef MP-WEIXIN
					// that.requestMessage()
					wx.login({
						success(res) {
							if (res.code) {
								console.log(res.code)
								console.log("调用微信登录接口获取code并传给后台接口")
								//调接口将cede传给后台
								that.doBindUserSocialAccount(res.code);
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
					//#endif
					
					uni.navigateTo({
						url: '/pages/index/index'
					})


				});
			},
			doBindUserSocialAccount(code) {
				messageApi.doBindUserSocialAccount({
					"jsCode": code,
					"socialAccountCode": "WECHAT_MINI"
				}, (result) => {
					console.log(result)
					console.log("接口doBindUserSocialAccount成功");
				}, (error) => {
					console.log("绑定用户的社交账号失败:" + JSON.stringify(error));
				});
			},

			// requestMessage() {
			// 	authMenuApi.getMsgTemplateInfoBySocialAccountCode((result) => {
			// 		console.log(result, "getMsgTemplateInfoBySocialAccountCode成功");
			// 		if (result.list) {
			// 			var listIds = []
			// 			result.list.forEach((item) => {
			// 				listIds.push(item.msgTemplateCode)
			// 			})
			// 			//获取消息模板ID
			// 			authMenuApi.requestMessage(listIds)
			// 		}
			// 	})
			// },
		},
		onLaunch(res) {
			console.log(res, '-------launch');
		},
		onShow: function() {
			let userInfo = uni.getStorageSync("userInfo")
			console.log(userInfo);
			if (userInfo) {
				this.userName = userInfo.userCode
				this.checkedArgeement = true
				if (uni.getStorageSync("rememberPassword") == true) {
					// debugger
					this.passWord = decryptAES(uni.getStorageSync("pwd"))

				}
			}
			// #ifdef MP-WEIXIN
			this.appVersion = uni.getAppBaseInfo().appVersion
			// #endif
			// #ifdef APP
			this.appVersion = plus.runtime.version
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		position: fixed;
		overflow-y: scroll;
		background-size: cover;
	}

	.container-card {
		width: 90%;
		// height: 26rem;
		padding-bottom: 2rem;
		background-color: white;
		position: relative;
		left: 50%;
		top: 60%;
		transform: translate(-50%, -50%);
		box-shadow: 5px 5px 5px #888888;
		border-radius: 10rpx;
	}

	.header {
		padding-top: 10%;
		height: 27%;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}

	.main {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		margin-top: 30px;
	}

	.main view {
		width: 80%;
		height: 2.5rem;
		position: relative;
		margin-bottom: 15px;
		border: 1px solid rgba(160, 160, 160, 1);
		border-radius: 10px;
		overflow: hidden;
	}

	.main view text {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1rem;
		color: #999999;
	}

	.main view input {
		width: 100%;
		height: 100%;
		padding-left: 2.2rem;
		padding-right: 1rem;
		font-size: 1rem;
		color: #888;
		overflow: hidden;
		background: #fff;
	}

	.login_btn {
		width: 70%;
		margin: 20px auto;
		position: relative;
		text-align: center;
	}

	.login_btn button {
		background: #0959B8;
		color: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 5px #eee;
	}

	.checkbox_pow {
		transform: scale(0.7);
	}
</style>